﻿@model Be.BeBooking

@{
    ViewBag.Title = "Index";
    if(TempData["alertMessage"] != null) {
        <script type="text/javascript">
            alert("@TempData["alertMessage"]");
        </script>    
    }
}


<h1>Welcome to Student</h1>

<section id="controls">
    <!--<ol id="cals">
	    <li><button name="day">Day</button></li>
	    <li class="on"><button name="week">Week</button></li>
	    <li><button name="month">Month</button></li>
	    <li><button name="year">Year</button></li>
    </ol>-->
    <h1 id="date_head"></h1>
    <ol id="nav">
        <li>@Html.ActionLink("New Booking", "NewBooking")</li>
        <li>
            <button name="prev">Previous</button></li>
        <li class="on">
            <button name="today">Today</button></li>
        <li>
            <button name="next">Next</button></li>
    </ol>
</section>
<section id="calendar"></section>
<script>
    $(document).ready(function() {
        $calendar = $('#calendar');
        var settings = {
            url: 'Student/GetBookings',
            type: 'GET',
            dataType: 'json',
            success: loadEvents,
            error: function() {
                alert('there was an error while fetching events!');
            }
        };
        $.ajax(settings);

        function loadEvents(data) {
            $eventsDB = $(data);
            events = [];
            $eventsDB.each(function(i) {
                begins = new Date(parseInt($eventsDB[i].StartTime.substr(6)));
                ends = new Date(parseInt($eventsDB[i].EndTime.substr(6)));
                events[i] = {
                    uid: $eventsDB[i].Id,
                    begins: begins,
                    ends: ends,
                    notes: $eventsDB[i].Comments,
                    color: (i % 2) ? 'blue' : 'green'
                };
            });
            setupCalendar(events);
        }

        function setupCalendar(events) {
            $calendar.cal({
                startdate: $.cal.date().addDays(2 - $.cal.date().format('N')),
                allowresize: true,
                allowmove: true,
                allowselect: true,
                allowremove: true,
                allownotesedit: true,
                eventselect: function(uid) {
                    console.log('Selected event: ' + uid);
                    window.location.href = "/Student/EditBooking/" + uid
                },
                eventremove: function(uid) {
                    window.location.href = "/Student/DeleteBooking/" + uid;
                },
                events: events
            });
        }

        /**
        * Button click handler. 
        *
        * TODO: Turn this into a drop-in module for calendars once we've got the capability to 
        * 		 toggle calendar views without reloading. Include 'formatRange' method.
        */
        $('#nav').on('click', 'button[name]', function() {
            var $this = $(this), action = $this.attr('name');
            // If this is already the current state, just exit.
            if($this.is('.on')) return;
            // Switch to the new state.
            switch(action) {
                case 'prev':
                case 'today':
                case 'next':
                    var today = $.cal.date(),
                        starting = $calendar.cal('option', 'startdate'),
                        duration = $calendar.cal('option', 'daystodisplay'),
                        newstart = starting,
                        newend;

                    switch(action) {
                        case 'next': newstart = starting.addDays(duration); $('button[name="today"]').parent().removeClass('on'); break;
                        case 'prev': newstart = starting.addDays(0 - duration); $('button[name="today"]').parent().removeClass('on'); break;
                        case 'today': newstart = $.cal.date().addDays(2 - $.cal.date().format('N')); break;
                    }
                    // Work out the new end date.
                    newend = newstart.addDays(duration - 1);
                    // Set the new startdate.
                    $calendar.cal('option', 'startdate', newstart);
                    if(today >= newstart && today <= newend) $('button[name="today"]').parent().addClass('on');
                    break;
            }
        });
    });
</script>
